<template>
  <el-select
    ref="input"
    v-model="value"
    class="cell-editor"
    size="mini"
    :popper-class="params.AllOpen?'all-open':''"
    :filterable="params.filterable || params.allowCreate"
    :allow-create="params.allowCreate"
    default-first-option
    clearable
    @change="select"
    @keydown.native="keydown"
  >
    <el-option
      v-for="(item, index) in params.list"
      :key="index"
      :label="item[labelProp]"
      :value="item[valueProp]"
    />
  </el-select>
</template>

<script>

export default {
  name: 'SelectionCellEditor',
  data() {
    return {
      value: ''
    }
  },
  computed: {
    labelProp() {
      return (this.params.props && this.params.props.label) || 'label'
    },
    valueProp() {
      return (this.params.props && this.params.props.value) || 'value'
    }
  },
  created() {
    this.setInitialState(this.params)
  },
  mounted() {
    if (!this.params.cellStartedEdit) return
    this.$nextTick(() => {
      const input = this.$refs.input
      input.focus()
    })
  },
  methods: {
    getValue() {
      return this.value
    },
    focusIn() {
      const input = this.$refs.input
      input.focus()
    },
    // private
    setInitialState(params) {
      this.value = params.value
    },
    select(value) {
      if (this.params.select) {
        const list = this.params.list.filter(item => item[this.valueProp] === value)
        this.params.select(this.params.node, ...list)
      }
      if (this.params.context.componentParent.editType !== 'fullRow') {
        this.params.stopEditing()
      }
    },
    keydown(e) {
      if (e.keyCode === 13) {
        this.params.stopEditing(true)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
